<script setup>
import TeamTagList from "../components/TeamTagList.vue";
import { ref, reactive, onMounted } from "vue";
import { Toast } from "vant";
import { teamPageQueryUser } from "../services/pageQuery/TeamPageQuery.js";
import { getCurrentUser } from "../services/user.js";
let teamList = ref([]);
let param = reactive({
    searchText: "",
    description: "",
    maxNum: null,
    name: "",
    pageNum: 1,
    pageSize: 4,
    status: 0,
});
let total = ref();
const user = ref({});
const active = ref("public");

const onSearch = async (searchText) => {
    // 这里也要发请求
    [teamList.value, total.value] = await teamPageQueryUser(param);
};
const onCancel = () => (param.searchText = "");
const onTabChange = async(name) => {
    console.log(name);
    if (name == 'public') {
        param.status = 0;
    } else {
        param.status = 2;
    }
    [teamList.value, total.value] = await teamPageQueryUser(param);
}
onMounted(async () => {
    // 这里要发请求
    [teamList.value, total.value] = await teamPageQueryUser(param);
    user.value = await getCurrentUser();
});
</script>
<template>
    <div id="tagList">
        <!-- 创建队伍按钮 -->
        <van-button
            class="add-button"
            icon="plus"
            type="primary"
            to="/inter/user/createTeam"
        ></van-button>
        <!-- 搜索栏 -->
        <form action="/">
            <van-search
                v-model="param.searchText"
                show-action
                placeholder="请输入搜索关键词"
                @search="onSearch"
                @cancel="onCancel"
            />
        </form>
        <!-- tab栏 -->
        <van-tabs v-model:active="active" @change="onTabChange">
            <van-tab title="公开" name="public"/>
            <van-tab title="加密" name="secret"/>
        </van-tabs>
        <!--队伍展示体-->
        <TeamTagList
            :teamList="teamList"
            :currentUserId="user.id"
        ></TeamTagList>
        <!-- 分页 插件-->
        <van-pagination
            @change="onSearch"
            v-if="teamList && teamList.length >= 1"
            v-model="param.pageNum"
            :total-items="total"
            :show-page-size="3"
            :items-per-page="param.pageSize"
            force-ellipses
        />
    </div>
</template>

<style scoped>
#tagList {
    margin-bottom: 50px;
}
.add-button {
    position: fixed;
    bottom: 60px;
    width: 40px;
    right: 12px;
    height: 40px;
    border-radius: 50%;
    z-index: 1;
}
</style>
